import React, { useEffect, useState, useRef } from "react"
// import StateDemo1 from "./StateDemo1"
// import StateDemo2 from "./StateDemo2"
// import List1 from "./List1"
// import UseRefDemo from "./UseRefDemo"
// import UseMemoDemo from "./UseMemoDemo"
// import useMouse from "./useMouse"
import useGetUserInfo from "./useGetUserInfo"

function App() {
  // const { x, y } = useMouse()
  // const { userInfo, loading } = useGetUserInfo()
  const [count, setCount] = useState(0)
  const countRef = useRef(0)

  useEffect(() => {
    countRef.current = count
  }, [count])

  useEffect(() => {
    const id = window.setInterval(() => {
      setCount(countRef.current + 1)
    }, 1000)
    return () => {
      window.clearInterval(id)
    }
  }, [])
  return (
    <>
      {/* <StateDemo1 /> */}
      {/* <StateDemo2 /> */}
      {/* <List1></List1> */}
      {/* <UseRefDemo /> */}
      {/* <UseMemoDemo /> */}
      <div>
        {/* {x} {y} */}
        {/* {loading ? "加载中..." : userInfo} */}
        {count}
      </div>
    </>
  )
}

export default App
